/**
 * 拉取和滚动加载
 */
import React, { Component } from 'react';
import {
  ActivityIndicator, View, Text, Image, StyleSheet, Dimensions
} from 'react-native';
import PropTypes from 'prop-types';
import AppImages from '../assets';
import { PullList } from './pull';

const headerHeight = SCALE(200);
export default class HomeCard extends Component {
  static PropTypes = {
    onPullRelease: PropTypes.func.isRequired,
    // onEndReachedThreshold: PropTypes.number,
    // initialListSize: PropTypes.number,
    // numColumns: PropTypes.number,
    renderRow: PropTypes.func.isRequired,
    onEndReached: PropTypes.func.isRequired,
    initData: PropTypes.func.isRequired
  };

  static defaultProps = {
    style: {},
    onEndReachedThreshold: 0.2,
    initialListSize: 10,
    numColumns: 1,
    nomore: false
  };

  renderTopIndicator = (pulling, pullok, pullrelease /* gesturePosition */) => {
    if (pulling) {
      if (this.txtPulling) this.txtPulling.setNativeProps({ style: styles.show });
      if (this.txtPullok) this.txtPullok.setNativeProps({ style: styles.hide });
      if (this.txtPullrelease) this.txtPullrelease.setNativeProps({ style: styles.hide });
    } else if (pullok) {
      if (this.txtPulling) this.txtPulling.setNativeProps({ style: styles.hide });
      if (this.txtPullok) this.txtPullok.setNativeProps({ style: styles.show });
      if (this.txtPullrelease) this.txtPullrelease.setNativeProps({ style: styles.hide });
    } else if (pullrelease) {
      if (this.txtPulling) this.txtPulling.setNativeProps({ style: styles.hide });
      if (this.txtPullok) this.txtPullok.setNativeProps({ style: styles.hide });
      if (this.txtPullrelease) this.txtPullrelease.setNativeProps({ style: styles.show });
    }
    return (
      <View
        ref={(c) => {
          this.PullAll = c;
        }}
        style={styles.header}
      >
        <View
          ref={(c) => {
            this.txtPulling = c;
          }}
          style={styles.hide}
        >
          <Image
            style={{ width: SCALE(200), height: headerHeight }}
            source={AppImages.Header.pulling}
          />
        </View>
        <View
          ref={(c) => {
            this.txtPullok = c;
          }}
          style={styles.hide}
        >
          <Image
            style={{ width: SCALE(200), height: headerHeight }}
            source={AppImages.Header.pulling}
          />
        </View>
        <View
          ref={(c) => {
            this.txtPullrelease = c;
          }}
          style={styles.hide}
        >
          <Image
            style={{ width: SCALE(62), height: SCALE(46) }}
            source={AppImages.Header.pullrelease}
          />
        </View>
      </View>
    );
  };

  renderHeader() {
    return (
      <View
        style={{
          height: 50,
          backgroundColor: '#eeeeee',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        <Text style={{ fontWeight: 'bold' }}>This is header</Text>
      </View>
    );
  }

  renderFooter() {
    const { nomore } = this.props;
    if (nomore) {
      return null;
    }
    return (
      <View style={{ height: 100, marginTop: 12 }}>
        <ActivityIndicator />
      </View>
    );
  }

  render() {
    const {
      style,
      onPullRelease,
      onEndReachedThreshold,
      initialListSize,
      numColumns,
      renderRow,
      onEndReached,
      nomore,
      initData
    } = this.props;

    return (
      <PullList
        style={style}
        Key="list"
        ref={(list) => {
          initData(list);
        }}
        topIndicatorRender={this.renderTopIndicator}
        topIndicatorHeight={headerHeight}
        onEndReachedThreshold={onEndReachedThreshold || 0.2} // 决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
        onPullRelease={onPullRelease}
        onEndReached={nomore ? null : onEndReached} // 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用
        renderItem={renderRow}
        getItemLayout={(data, index) => ({ length: SCALE(390), offset: SCALE(390) * index, index })}
        numColumns={numColumns || 1}
        ItemSeparatorComponent={() => null}
        initialNumToRender={initialListSize} // 指定一开始渲染的元素数量
        renderLoading={() => null}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  image: {
    width: 257,
    height: 255,
    marginTop: SCALE(50)
  },
  header: {
    height: headerHeight,
    alignItems: 'center',
    justifyContent: 'center'
  },
  hide: {
    position: 'absolute',
    left: 10000
  },
  show: {
    position: 'relative',
    left: 0,
    flexDirection: 'row',
    width: Dimensions.get('window').width,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center'
  }
});
